<template>
<!--  主包无法正确使用分包资源，所以提取施工日志组件为主包组件-->
    <view>
        <view class="item">
            <view class="head">
                <view class="avatar">
                    <view class="avatar-view">
                        {{ item.createBy ? item.createBy[0] : '' }}
                    </view>
                  <view class="person-info">
                    <view>{{ item.createBy }}</view>
                    <view class="divider"></view>
                    <text class="gray">{{ item.submitUserRoleNames }}</text>
                  </view>
                </view>
                <view class="phone" v-if="item.submitUserPhone" @click="dial(item.submitUserPhone)">
                    <image src="http://51-jzt-dev.oss-cn-hangzhou.aliyuncs.com/miniapp/phone-icon.png"></image>
                    电话
                </view>
            </view>
            <view class="content">
                <wd-text :text="item.logDesc" lines="1" size="24rpx" color="#3d3d3d"></wd-text>
                <view class="img-list">
                    <image v-for="item,index in imgList" @click="previewImage(imgList,index)" :src="item"></image>
					<video v-for="item in videoList" :src="item" controls></video>
                </view>
            </view>
            <view v-if="imgsTotal > 3" class="expand" @click="unfold = !unfold">{{ unfold ? '收起' : '展开全部' }}</view>
        </view>
        <view class="date">{{ item.submitTime }}</view>
    </view>
</template>

<script setup>
import { ref, computed } from "vue";
import { previewImage } from "@/utils/utils";
const props = defineProps({
    item: {
        type: Object,
        default() {
            return {}
        }
    }
});
const unfold = ref(false)
/**
 * 图片列表
 */
const imgList = computed(() => {
    if (props.item.picUrls) {
        if (unfold.value) {
            return props.item.picUrls.split(',')
        } else {
            return props.item.picUrls.split(',').slice(0, 3)
        }
    } else {
        return []
    }
});
const videoList = computed(() => {
    if (props.item.videoUrls) {
        if (unfold.value) {
            return props.item.videoUrls.split(',')
        } else {
            return imgList.value.length>=3?[]:props.item.videoUrls.split(',').slice(0,3-imgList.value.length)
        }
    } else {
        return []
    }
});

/**
 * 图片总数
 */
const imgsTotal = computed(() => {
    return props.item.picUrls ? props.item.picUrls.split(',').length : 0
});
/**
 * 拨号
 */
const dial = (phoneNumber) => {
    uni.makePhoneCall({
        phoneNumber
    })
}
</script>

<style lang="scss" scoped>
.item {
    width: 100%;
    background: white;
    border-radius: 20rpx;

    .head {
        height: 98rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 2rpx solid #F6F8FA;
        padding: 0 32rpx;

        .avatar {
            display: flex;
            gap: 10rpx;
            flex: 1;
            align-items: center;

            .avatar-view {
                width: 64rpx;
                height: 64rpx;
                border-radius: 50%;
                background: $uni-color-primary;
                color: white;
                text-align: center;
                line-height: 64rpx;
            }
           .person-info{
             display: flex;
             align-items: center;
           }
            .divider {
                width: 4rpx;
                height: 20rpx;
                background: #D8D8D8;
                border-radius: 2rpx;
                margin: 0 20rpx;
                position: relative;
                top: 4rpx;
            }

            .gray {
                font-size: 24rpx;
                color: #86909C;
            }
        }

        .phone {
            border: 1px solid $uni-color-primary;
            width: 124rpx;
            height: 56rpx;
            border-radius: 28rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 8rpx;
            color: $uni-color-primary;
		
            image {
                width: 28rpx;
                height: 28rpx;
            }
        }
    }

    .content {
        padding: 32rpx;
        .img-list {
            display: flex;
            gap: 40rpx;
            flex-wrap: wrap;
            margin-top: 20rpx;

            image,video {
                width: 160rpx;
                height: 160rpx;
                border-radius: 12rpx;
                background: #e5e8ec;
            }
        }
    }
}

.expand {
    text-align: center;
    color: $uni-color-primary;
}

.date {
    text-align: right;
    font-size: 20rpx;
    color: #86909C;
    line-height: 48rpx;
    margin-bottom:20rpx;
}
</style>